<template>
  <view class="trust-status-layer" :data-trust="trustLevel">
    <!-- 信任状态指示器 -->
    <view class="trust-indicators">
      <view 
        class="indicator" 
        v-for="indicator in trustIndicators" 
        :key="indicator.type"
        :class="indicator.status"
        :title="indicator.tooltip"
      >
        <text class="indicator-icon">{{ indicator.icon }}</text>
      </view>
    </view>
    
    <!-- 信任光环效果 -->
    <view class="trust-aura" :class="trustLevel" v-if="showAura">
      <view class="aura-ring"></view>
      <view class="aura-particles">
        <view 
          class="particle" 
          v-for="i in particleCount" 
          :key="i"
          :style="getParticleStyle(i)"
        ></view>
      </view>
    </view>
    
    <!-- 信任值显示 -->
    <view class="trust-value-display">
      <text class="trust-number">{{ trustValue }}</text>
      <text class="trust-label">信任值</text>
    </view>
    
    <!-- 信任等级徽章 -->
    <view class="trust-badge" :class="trustLevel">
      <text class="badge-text">{{ getTrustLevelText() }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TrustStatusLayer',
  props: {
    trustValue: {
      type: Number,
      default: 50
    },
    showAura: {
      type: Boolean,
      default: true
    }
  },
  
  computed: {
    trustLevel() {
      if (this.trustValue >= 80) return 'high'
      if (this.trustValue >= 50) return 'medium'
      if (this.trustValue >= 20) return 'low'
      return 'broken'
    },
    
    trustIndicators() {
      return [
        {
          type: 'cooperation',
          icon: '🤝',
          status: this.trustValue >= 60 ? 'active' : 'inactive',
          tooltip: '协作能力'
        },
        {
          type: 'loyalty',
          icon: '💎',
          status: this.trustValue >= 80 ? 'active' : 'inactive',
          tooltip: '忠诚度'
        },
        {
          type: 'stability',
          icon: '⚖️',
          status: this.trustValue >= 40 ? 'active' : 'inactive',
          tooltip: '稳定性'
        }
      ]
    },
    
    particleCount() {
      return Math.floor(this.trustValue / 20) + 3
    }
  },
  
  methods: {
    getTrustLevelText() {
      const levels = {
        high: '高度信任',
        medium: '一般信任',
        low: '低度信任',
        broken: '信任破裂'
      }
      return levels[this.trustLevel] || '未知'
    },
    
    getParticleStyle(index) {
      const angle = (360 / this.particleCount) * index
      const radius = 30 + (this.trustValue / 100) * 20
      const x = Math.cos(angle * Math.PI / 180) * radius
      const y = Math.sin(angle * Math.PI / 180) * radius
      
      return {
        transform: `translate(${x}rpx, ${y}rpx)`,
        animationDelay: `${index * 0.1}s`
      }
    }
  }
}
</script>

<style scoped>
.trust-status-layer {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 信任指示器 */
.trust-indicators {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  z-index: 10;
}

.indicator {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16rpx;
  transition: all 0.3s ease;
}

.indicator.active {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  transform: scale(1.1);
  box-shadow: 0 0 8rpx rgba(76, 175, 80, 0.3);
}

.indicator.inactive {
  background: rgba(0, 0, 0, 0.1);
  color: #999;
  opacity: 0.5;
}

.indicator-icon {
  font-size: 14rpx;
}

/* 信任光环 */
.trust-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120rpx;
  height: 120rpx;
  pointer-events: none;
  z-index: 1;
}

.aura-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: auraPulse 2s infinite;
}

.trust-high .aura-ring {
  border: 2rpx solid rgba(76, 175, 80, 0.6);
  box-shadow: 0 0 20rpx rgba(76, 175, 80, 0.4);
}

.trust-medium .aura-ring {
  border: 2rpx solid rgba(255, 152, 0, 0.6);
  box-shadow: 0 0 20rpx rgba(255, 152, 0, 0.4);
}

.trust-low .aura-ring {
  border: 2rpx solid rgba(255, 87, 34, 0.6);
  box-shadow: 0 0 20rpx rgba(255, 87, 34, 0.4);
}

.trust-broken .aura-ring {
  border: 2rpx solid rgba(244, 67, 54, 0.6);
  box-shadow: 0 0 20rpx rgba(244, 67, 54, 0.4);
}

/* 光环粒子 */
.aura-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rpx;
  height: 4rpx;
  border-radius: 50%;
  animation: particleFloat 3s infinite;
}

.trust-high .particle {
  background: #4caf50;
  box-shadow: 0 0 6rpx #4caf50;
}

.trust-medium .particle {
  background: #ff9800;
  box-shadow: 0 0 6rpx #ff9800;
}

.trust-low .particle {
  background: #ff5722;
  box-shadow: 0 0 6rpx #ff5722;
}

.trust-broken .particle {
  background: #f44336;
  box-shadow: 0 0 6rpx #f44336;
}

/* 信任值显示 */
.trust-value-display {
  position: absolute;
  bottom: 16rpx;
  left: 16rpx;
  text-align: center;
  z-index: 10;
}

.trust-number {
  font-size: 24rpx;
  font-weight: bold;
  color: white;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  display: block;
}

.trust-label {
  font-size: 16rpx;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
}

/* 信任等级徽章 */
.trust-badge {
  position: absolute;
  top: 16rpx;
  left: 16rpx;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  font-size: 16rpx;
  font-weight: bold;
  z-index: 10;
}

.trust-badge.high {
  background: rgba(76, 175, 80, 0.9);
  color: white;
}

.trust-badge.medium {
  background: rgba(255, 152, 0, 0.9);
  color: white;
}

.trust-badge.low {
  background: rgba(255, 87, 34, 0.9);
  color: white;
}

.trust-badge.broken {
  background: rgba(244, 67, 54, 0.9);
  color: white;
}

.badge-text {
  font-size: 14rpx;
}

/* 动画效果 */
@keyframes auraPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes particleFloat {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
</style>

